<template>
  <ul class="list">
    <li v-for="item in items" :key="item.id" class="list-item">
      <a href="#" class="list-link">{{ item.name }}</a>
    </li>
  </ul>
</template>

<script setup lang="ts">
interface ListItem {
  id: number;
  name: string;
}

defineProps<{ items: ListItem[] }>();
</script>

<style lang="less" scoped>
.list {
  &-item {
    transition: background-color @transition-duration @transition-timing;

    &:hover {
      background-color: rgba(@primary-color, 0.05);
    }
  }

  &-link {
    display: block;
    padding: @spacing-sm @spacing-md;
    color: @text-color;
    text-decoration: none;
    transition: color @transition-duration @transition-timing;

    &:hover {
      color: @primary-color;
    }
  }
}
</style>
